// axios基础封装
import axios from 'axios'
import { getData } from './ls'
// 不挑项目 + 定义化

// 1. 实例化  axios + baseURL + timeout = instance[项目中要使用的请求实例对象]
// create方法可以执行多次 进行多个实例的生成 每个实例都可以有自己不同的配置

const instance = axios.create({
  baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  timeout: 5000
})

// 2. 请求拦截
// 发送请求之前 对请求参数做处理
instance.interceptors.request.use(config => {
  // config做一些定制化 添加token
  // 获取token数据
  // 加入到请求头中按照后端要求的格式
  // 登录接口调用的时候 如果这个时候取值 就会出现null.token的问题
  // 加一个可选链 只有getData('rabbit-profile') 有值的时候才去.token 不会报错了
  const token = getData('rabbit-profile')?.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, e => Promise.reject(e))

// 3. 响应拦截
// 1. 成功和失败回调的执行时机  http code 2xx 走第一个回调 不在2-300 走第二个回调
// 2. 成功回调中return的是啥 业务调用接口的时候获取到的数据就是啥 简化返回操作
// 3. 失败回调中return的东西 可以让业务组件中通过instance发送请求时如果发生了错误 可以进行捕获

// 场景
// 1. 401 token失效  跳转到登录 清除本地数据
// 2. 解决后端不以http状态码决定当前接口是否成功而是以一个自定义的字段success
// 在第一个回调函数中自行判断当前接口是否成功 成功return response 失败 手动return Promise.reject(error)
instance.interceptors.response.use(
  (response) => {
    return response.data
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 1. 直接把instance实例导出 供api使用 把每个具体的业务接口函数的封装都放到api中去做
// 2. 在当前的模块中再封装一个比较通用的请求方法 让api模块都调用这个方法

// 需求
// 1. 三个参数  url  method  reqData
// 2. 已知小兔鲜请求方法只有俩种 get/post 要求我们这个函数可以根据请求方法自动适配参数应该放置的位置
// 3. 请求方法用户可以传入大小写都行
// 4. 用法 request('url','get',{name:"cp"}).then(res=>{})

function request (url, method, reqData) {
  // 做什么事儿
  return instance({
    url,
    method,
    // 如何适配一个对象的key get -> params post -> data
    [method.toLowerCase() === 'get' ? 'params' : 'data']: reqData
  })
}

export default request
